<template>
  <el-row class="header-title">
    <el-date-picker
        v-model="date"
        type="month"
        placeholder="选择月份"
        @change="dateChange">
    </el-date-picker>
  </el-row>
  <el-table :data="tableData.slice((currentPage-1)*currentSize,Math.min(currentPage*currentSize,tableData.length))" header-cell-class-name="table-header">
    <el-table-column
        prop="part"
        label="部门">
    </el-table-column>
    <el-table-column
        prop="project"
        label="承办项目数">
    </el-table-column>
    <el-table-column
        prop="people"
        label="培训人数">
    </el-table-column>
    <el-table-column
        prop="classroomUsage"
        label="使用教室（间次）">
    </el-table-column>
    <el-table-column
        prop="dormitoryUsage"
        label="使用宿舍（间夜）">
    </el-table-column>
    <el-table-column
        label="操作">
      <template #default="scope">
        <el-button
            type="text"
            @click="handleLook(scope.$index, scope.row)">查看</el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-row justify="end" class="footer-pager">
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[4, 5, 6, 7, 8]"
        :page-size="currentSize"
        layout="sizes, prev, pager, next, jumper"
        :total="tableData.length">
    </el-pagination>
  </el-row>
</template>

<script>
import axios from "axios";
import moment from "moment";

export default {
  name: "MonthReport",
  data(){
    return{
      date: new Date(),
      tableData:[
      //     {
      //   id:0,
      //   part:'所有部门（合计）',
      //   project:51,
      //   people:12,
      //   classroomUsage:23,
      //   dormitoryUsage:42,
      // }
      // ,{
      //   id:1,
      //   part:'开放学院',
      //   projects:51,
      //   people:12,
      //   classroom:23,
      //   dormitory:42,
      // },{
      //   id:2,
      //   part:'学生处',
      //   projects:51,
      //   people:12,
      //   classroom:23,
      //   dormitory:42,
      // },{
      //   id:3,
      //   part:'教育学院',
      //   projects:51,
      //   people:12,
      //   classroom:23,
      //   dormitory:42,
      // }
      ],
      currentPage: 1,
      currentSize: 4,
    }
  },
  methods:{
    findAllMonthReport(date){
      let mdate = moment(date);
      axios.get(this.$host+"/report/month?date="+mdate.format("YYYY-MM"),).then((response)=>{
          if(response.data.code === 0){
            this.tableData = response.data.data;
          }else{
            this.$message.error(response.data.msg);
          }
      })
    },
    handleLook(index,row){
      this.$router.push('monthReport?id='+row.monthReportId+"&part="+row.part);
      console.log(index);
      row;
    },
    handleSizeChange(val) {
      this.currentSize = val;
    },
    handleCurrentChange(val) {
      this.currentPage = val;
    },
    dateChange(newDate){
      this.findAllMonthReport(newDate);
    }
  },
  created() {
    this.findAllMonthReport(this.date);
  }
}
</script>

<style scoped>

</style>